<app-tasks-header></app-tasks-header>

<app-tasks-tabulation>
  <div id="executions-list">

    <div id="filters" class="pui-filter" *ngIf="!isExecutionsEmpty()">
      <form #registerAppsForm="ngForm" name="registerAppsForm" role="form" (ngSubmit)="search()" novalidate>

        <div class="pui-filter-center">
          <div style="height: 34px">
            &nbsp;
          </div>
        </div>

        <div class="pui-filter-actions">
          <div class="pui-filter-right" style="text-align: right">
            <button (click)="refresh()" name="app-refresh" type="button" class="btn btn-default btn-icon"
                    title="Refresh">
              <span class="glyphicon glyphicon-refresh"></span>
            </button>
          </div>
        </div>

      </form>
    </div>

    <table *ngIf="taskExecutions?.items && taskExecutions.items.length > 0"
           class="table table-hover table-actions" id="taskExecutionsTable">
      <thead>
      <tr>
        <th style="width: 140px">
          <app-sort id="sort-id" (change)="applySort($event)" [value]="'TASK_EXECUTION_ID'" [sort]="params">
            Execution Id
          </app-sort>
        <th>
          <app-sort id="sort-task" (change)="applySort($event)" [value]="'TASK_NAME'" [sort]="params">
            Task Name
          </app-sort>
        </th>
        <th nowrap="">
          <app-sort id="sort-startdate" (change)="applySort($event)" [value]="'START_TIME'" [sort]="params">
            Start Date
          </app-sort>
        </th>
        <th nowrap="">
          <app-sort id="sort-enddate" (change)="applySort($event)" [value]="'END_TIME'" [sort]="params">
            End Date
          </app-sort>
        </th>
        <th nowrap="" style="width: 120px">
          <app-sort id="sort-exitcode" (change)="applySort($event)" [value]="'EXIT_CODE'" [sort]="params">
            Exit Code
          </app-sort>
        </th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <ng-container
        *ngFor="let item of taskExecutions.items | paginate: taskExecutions.getPaginationInstance(); index as i">
        <tr>
          <td>
            <a [routerLink]="'/tasks/executions/' + item.executionId">
              #{{ item.executionId }}
            </a>
          </td>
          <td>
            <a [routerLink]="'/tasks/definitions/' + item.taskName">{{ item.taskName }}</a>
          </td>
          <td>
            {{ item.startTime }}
          </td>
          <td>
            {{ item.endTime }}
          </td>
          <td>
            {{ item.exitCode }}
          </td>
          <td class="table-actions" width="10px" nowrap="">
            <div class="actions" role="group">
              <button type="button" name="task-details{{ i }}" (click)="details(item)" class="btn btn-default"
                      title="Details">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </div>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </table>

    <div class="row">
      <div class="col-xs-12">
        <div id="pagination" *ngIf="taskExecutions && taskExecutions.totalPages > 1">
          <pagination-controls *ngIf="taskExecutions.items.length > 0 "
                               (pageChange)="getPage($event)"></pagination-controls>
        </div>
      </div>
      <div class="col-xs-12" *ngIf="taskExecutions && taskExecutions?.totalElements > 0">
        <app-pager [page]="params.page" [total]="taskExecutions.totalElements" [size]="params.size"
                   (sizeChange)="changeSize($event)">
        </app-pager>
      </div>
    </div>

    <div *ngIf="taskExecutions" id="empty" style="padding-top:1.5rem">

      <div *ngIf="isExecutionsEmpty()" class="text-center">
        <div class="alert alert-warning" style="display:inline-block;margin:0 auto">
          <strong>No tasks were executed, yet.</strong>
        </div>
      </div>

    </div>

  </div>

</app-tasks-tabulation>
